<template>
  <div class="app-container">
    <el-form ref="queryFormRef" size="small" :inline="true" :model="queryParams" class="demo-form-inline"
             v-hasPermi="['sa:come:query']">
      <el-form-item label="来客单位" prop="customerUnit">
        <el-input v-model.trim="queryParams.customerUnit" clearable :maxlength="50"
                  placeholder="请输入来客单位"></el-input>
      </el-form-item>
      <el-form-item label="来客姓名" prop="customerName">
        <el-input v-model.trim="queryParams.customerName" clearable :maxlength="50"
                  placeholder="请输入来客姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" icon="el-icon-search" @click="searchHandler">查询</el-button>
        <el-button icon="el-icon-refresh-right" size="mini" @click="resetHandler">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-button plain type="primary" size="mini" icon="el-icon-plus" v-hasPermi="['sa:come:add']"
                     @click="openDialog(null)">增加
          </el-button>
          <!--          <el-button plain type="warning" size="mini" icon="el-icon-download" v-hasPermi="['sa:come:export']" @click="exportHandler">导出</el-button>-->
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>

    <el-table
      ref="tableRef"
      :data="tableData"
      highlight-current-row
      max-height="600"
      border
      v-loading="loading"
      v-horizontal-scroll="'auto'"
      class="cus_table"
      style="width: 100%;margin-top: 10px;"
    >
      <el-table-column
        type="index"
        width="50"
        align="center"
        label="序号"
      />
      <el-table-column
        property="customerUnit"
        label="来客单位"
        align="center"
        min-width="140"
      />
      <el-table-column label="来客信息">
        <el-table-column
          property="customerName"
          label="来客姓名"
          align="center"
          min-width="100"
          class-name="cell_table"
        >
          <template slot-scope="scope">
            <div class="item_table">
              <tr class="item_tr" v-for="(item, ind) in scope.row.customerName.split(',')" :key="ind">
                <td class="item_td">{{ item }}</td>
              </tr>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          property="customerDepartment"
          label="详细部门"
          align="center"
          min-width="120"
          class-name="cell_table"
        >
          <template slot-scope="scope">
            <div class="item_table">
              <tr class="item_tr" v-for="item in scope.row.customerDepartment.split(',')" :key="item">
                <td class="item_td">{{ item }}</td>
              </tr>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          property="customerJob"
          label="来客职务"
          align="center"
          min-width="100"
          class-name="cell_table"
        >
          <template slot-scope="scope">
            <div class="item_table">
              <tr class="item_tr" v-for="item in scope.row.customerJob.split(',')" :key="item">
                <td class="item_td">{{ item }}</td>
              </tr>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          property="customerPhone"
          label="联系电话"
          align="center"
          min-width="110"
          class-name="cell_table"
        >
          <template slot-scope="scope">
            <div class="item_table">
              <tr class="item_tr" v-for="item in scope.row.customerPhone.split(',')" :key="item">
                <td class="item_td">{{ item }}</td>
              </tr>
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="接站信息">
        <el-table-column
          property="customerVehicle"
          label="交通工具"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          property="arriveStation"
          label="到达车站"
          align="center"
          min-width="100"
        />
        <el-table-column
          property="arriveTime"
          label="到达时间"
          align="center"
          min-width="100"
        />
        <el-table-column
          property="pickPeople"
          label="接站人员"
          align="center"
          min-width="120"
        />
      </el-table-column>
      <el-table-column
        property="inspectTime"
        label="考察时间"
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        label="宴请信息"
      >
        <el-table-column
          property="fatePeople"
          label="宴请人员"
          align="center"
          min-width="120"
        />
        <el-table-column
          property="fatePlace"
          label="宴请地点"
          align="center"
          min-width="120"
        />
        <el-table-column
          property="presentLeader"
          label="出席领导"
          align="center"
          min-width="120"
        />
      </el-table-column>
      <el-table-column
        property="inspectReason"
        label="考察目的"
        align="center"
        width="120"
      >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_customer_visit_purpose" :value="scope.row.inspectReason"/>
        </template>
      </el-table-column>
      <el-table-column
        property="marketPrepareMaterial"
        label="准备材料"
        align="center"
        width="160"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.marketPrepareMaterial">
            <div v-for="item in scope.row.marketPrepareMaterial.split(',').filter(i => i)">
              <dict-tag :options="dict.type.sys_prepare_materials" :value="item"/>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        property="inspectionProcess"
        label="考察流程"
        align="center"
        min-width="140"
      >
        <template slot-scope="scope">
          <div v-html="scope.row.inspectionProcess.replace(/\n/g, '<br/>')"></div>
        </template>
      </el-table-column>
      <el-table-column
        property="showContent"
        label="电子屏内容"
        align="center"
        min-width="160"
      >
      </el-table-column>
      <el-table-column
        property="receptionSpecifications"
        label="接待规格"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_reception_standards" :value="scope.row.receptionSpecifications"/>
        </template>
      </el-table-column>
      <el-table-column
        property="isPresent"
        label="提供礼品"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_provide_gifts" :value="scope.row.isPresent"/>
        </template>
      </el-table-column>
      <el-table-column
        property="dietaryArrangement"
        label="饮食安排"
        align="center"
        min-width="120"
      >
        <template slot-scope="scope">
          <div v-html="scope.row.dietaryArrangement.replace(/\n/g, '<br/>')"></div>
        </template>
      </el-table-column>
      <el-table-column
        property="isTravel"
        label="是否旅游"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.isTravel ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        property="travelAmount"
        label="旅游费用"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.travelAmount === 1 ? '公司承担' : '客户承担' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="送站信息">
        <el-table-column
          property="isSendStation"
          label="是否送站"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.isSendStation ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          property="sendStation"
          label="送达车站"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          property="sendTime"
          label="送站时间"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          property="sendPeople"
          label="送站人员"
          align="center"
          min-width="120"
        >
        </el-table-column>
      </el-table-column>
      <el-table-column
        property="remark"
        label="备注"
        align="center"
        min-width="120"
      />
      <el-table-column
        property="createBy"
        label="创建人"
        align="center"
        min-width="100"
      />
      <el-table-column
        property="createTime"
        label="创建时间"
        align="center"
        sortable
        min-width="100"
      />
      <el-table-column
        label="操作"
        align="center"
        v-if="$auth.hasPermi('sa:come:edit') || $auth.hasPermi('sa:come:remove')"
      >
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit" v-hasPermi="['sa:come:edit']" @click="openDialog(scope.row)">修改
          </el-button>
          <el-popconfirm
            confirm-button-text="是"
            cancel-button-text="否"
            title="确定删除吗？"
            @confirm="deleteHandler(scope.row)"
          >
            <el-button slot="reference" icon="el-icon-delete" v-hasPermi="['sa:come:remove']" type="text"
                       style="margin-left: 10px">删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
      :title="dialogTitle === 1 ? '新增' : '修改'"
      :visible.sync="dialogVisible"
      width="1250px"
      :close-on-click-modal="false"
      :fullscreen="device === 'mobile'"
    >
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" class="demo-form"
               :label-position="device === 'mobile' ? 'top' : 'right'">
        <el-form-item label="来客单位" prop="customerUnit">
          <el-input v-model.trim="form.customerUnit" clearable :maxlength="50" placeholder="请输入来客单位"></el-input>
        </el-form-item>
        <el-form-item label="来客信息" prop="customerName">
          <el-row :gutter="0" v-for="(item, ind) in customerInfoList" :key="item.id" :style="{
            marginTop: ind && '6px'
          }">
            <el-col :span="device === 'mobile' ? 24 : 5">
              <el-form-item label="来客姓名" label-width="80px">
                <el-input v-model.trim="item.customerName" clearable :maxlength="50"
                          placeholder="请输入来客姓名" @blur="handleBlur" />
              </el-form-item>
            </el-col>
            <el-col :span="device === 'mobile' ? 24 : 6">
              <el-form-item label="详细部门" prop="customerDepartment" label-width="80px">
                <el-input v-model.trim="item.customerDepartment" clearable :maxlength="20"
                          placeholder="请输入详细部门"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="device === 'mobile' ? 24 : 5">
              <el-form-item label="来客职务" prop="customerJob" label-width="80px">
                <el-input v-model.trim="item.customerJob" clearable :maxlength="20" placeholder="请输入职务"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="device === 'mobile' ? 24 : 6">
              <el-form-item label="联系电话" prop="customerPhone" label-width="80px">
                <el-input v-model.trim="item.customerPhone" clearable :maxlength="20"
                          placeholder="请输入联系电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="device === 'mobile' ? 24 : 2">
              <div style="text-align: right">
                <el-button v-if="ind === customerInfoList.length - 1" icon="el-icon-plus" size="mini" type="primary"
                           plain circle @click="addCustomerInfo(item.id)"></el-button>
                <el-button v-if="ind !== 0" icon="el-icon-minus" size="mini" type="danger" plain circle
                           @click="removeCustomerInfo(ind)"></el-button>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
        <el-row :gutter="0">
          <el-col :span="device === 'mobile' ? 24 : 6">
            <el-form-item label="交通工具" prop="customerVehicle">
              <el-input v-model.trim="form.customerVehicle" clearable :maxlength="20"
                        placeholder="请输入来客交通工具"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="device === 'mobile' ? 24 : 6">
            <el-form-item label="到达车站" prop="arriveStation">
              <el-input v-model.trim="form.arriveStation" clearable :maxlength="20"
                        placeholder="请输入到达车站"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="device === 'mobile' ? 24 : 6">
            <el-form-item label="到达时间" prop="arriveTime">
              <el-date-picker
                v-model="form.arriveTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择时间"
                style="width: 100%;"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="device === 'mobile' ? 24 : 6">
            <el-form-item label="是否接站" prop="isPick">
              <el-checkbox v-model="form.isPick" :true-label="1" :false-label="0">是否接站</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="接站人员" prop="pickPeople" v-if="form.isPick">
          <el-input v-model="form.pickPeople" type="textarea" :autosize="{ maxRows: 6 }" :maxlength="100"
                    placeholder="请输入接站人员"></el-input>
        </el-form-item>
        <el-row :gutter="0">
          <el-col :span="device === 'mobile' ? 24 : 6">
            <el-form-item label="考察时间" prop="inspectTime">
              <el-date-picker
                v-model="form.inspectTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择时间"
                style="width: 100%;"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="device === 'mobile' ? 24 : 6">
            <el-form-item label="是否宴请" prop="isFete">
              <el-checkbox v-model="form.isFete" :true-label="1" :false-label="0">是否宴请</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="device === 'mobile' ? 24 : 6" v-if="form.isFete">
            <el-form-item label="宴请人员" prop="fatePeople">
              <el-input v-model.trim="form.fatePeople" placeholder="请输入宴请人员" :maxlength="100" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="device === 'mobile' ? 24 : 6" v-if="form.isFete">
            <el-form-item label="宴请地点" prop="fatePlace">
              <el-input v-model.trim="form.fatePlace" placeholder="请输入宴请地点" :maxlength="100" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="出席领导" prop="presentLeader" v-if="form.isFete">
          <el-input v-model="form.presentLeader" type="textarea" :maxlength="100" :autosize="{ maxRows: 6 }"
                    placeholder="请输入出席领导"></el-input>
        </el-form-item>
        <el-form-item label="考察目的" prop="inspectReason">
          <el-select v-model="form.inspectReason" clearable default-first-option placeholder="请选择来公司考察目的">
            <el-option v-for="item in dict.type.sys_customer_visit_purpose" :key="item.value" :label="item.label"
                       :value="+item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="准备材料" prop="marketPrepareMaterial">
          <el-checkbox-group v-model="form.marketPrepareMaterial">
            <el-checkbox v-for="item in dict.type.sys_prepare_materials" :key="item.value"
                         :label="item.label"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="考察流程" prop="inspectionProcess">
          <el-checkbox v-model="inspectionProcess" label="公司固定接待流程" :false-label="0"
                       :true-label="1"></el-checkbox>
          <el-input v-if="!inspectionProcess" v-model="form.inspectionProcess" type="textarea"
                    :autosize="{ maxRows: 6 }" :maxlength="200" placeholder="请输入考察流程"></el-input>
        </el-form-item>
        <el-row :gutter="0">
          <el-col :span="device === 'mobile' ? 24 : 12">
            <el-form-item label="电子屏内容" prop="showContent">
              <el-input v-model.trim="form.showContent" :maxlength="200" placeholder="请输入电子屏显示内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="device === 'mobile' ? 24 : 6">
            <el-form-item label="接待规格" prop="receptionSpecifications">
              <el-select v-model="form.receptionSpecifications" clearable default-first-option
                         placeholder="请选择接待规格">
                <el-option v-for="item in dict.type.sys_reception_standards" :key="item.value" :label="item.label"
                           :value="+item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="device === 'mobile' ? 24 : 6">
            <el-form-item label="提供礼品" prop="isPresent">
              <el-select v-model="form.isPresent" clearable default-first-option placeholder="请选择提供礼品">
                <el-option v-for="item in dict.type.sys_provide_gifts" :key="item.value" :label="item.label"
                           :value="+item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="饮食安排" prop="dietaryArrangement">
          <el-input v-model="form.dietaryArrangement" type="textarea" :autosize="{ maxRows: 6 }" :maxlength="200"
                    placeholder="请输入公司考察期间饮食安排"></el-input>
        </el-form-item>
        <el-row :gutter="0">
          <el-col :span="device === 'mobile' ? 24 : 6">
            <el-form-item label="是否旅游" prop="isTravel">
              <el-checkbox v-model="form.isTravel" label="是否需要旅游" :false-label="0" :true-label="1"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="device === 'mobile' ? 24 : 6" v-if="form.isTravel">
            <el-form-item label="旅游费用" prop="travelAmount">
              <el-radio-group v-model="form.travelAmount">
                <el-radio v-for="item in travelAmountList" :key="item.value" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col :span="device === 'mobile' ? 24 : 6">
            <el-form-item label="是否送站" prop="isSendStation">
              <el-checkbox v-model="form.isSendStation" label="是否需要送站" :false-label="0"
                           :true-label="1"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="device === 'mobile' ? 24 : 6" v-if="form.isSendStation">
            <el-form-item label="送达车站" prop="sendStation">
              <el-input v-model.trim="form.sendStation" clearable :maxlength="50"
                        placeholder="请输入送达车站"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="device === 'mobile' ? 24 : 6" v-if="form.isSendStation">
            <el-form-item label="送站时间" prop="sendTime">
              <el-date-picker
                v-model="form.sendTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择时间"
                style="width: 100%;"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="device === 'mobile' ? 24 : 6" v-if="form.isSendStation">
            <el-form-item label="送站人员" prop="sendPeople">
              <el-input v-model.trim="form.sendPeople" placeholder="请输入送站人员" :maxlength="100" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" :maxlength="200" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('formRef')">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {addDataApi, deleteDataApi, getDataListApi, updateDataApi} from "@/api/crm/sa/come";
import ProvinceData from '@/views/crm/data/province.json'
import {getUserProfile} from "@/api/system/user";
import {mapGetters} from 'vuex';

export default {
  name: 'CustomerComeView',
  dicts: ['sys_customer_visit_purpose', 'sys_reception_standards', 'sys_provide_gifts', 'sys_prepare_materials'],
  data() {
    return {
      // 来客信息列表
      customerInfoList: [
        {
          id: 1,
          customerName: "",
          customerDepartment: "",
          customerJob: "",
          customerPhone: ""
        }
      ],
      // 记录上一次打开弹窗是修改or增加
      // null 增加
      // 非null 修改
      formId: null,
      // 加载动画
      loading: true,
      // 省份数据
      provinceList: [],
      // 弹框标题 1是增加 其他是修改
      dialogTitle: 1,
      // 弹框显示
      dialogVisible: false,
      // 新增和修改参数
      form: {
        customerUnit: "", // 来客单位
        customerName: "", // 来客姓名
        customerDepartment: "", // 详细部门
        customerJob: "", // 职务
        customerPhone: "", // 联系电话
        customerVehicle: "", // 来客交通工具
        arriveStation: "", // 具体到站车站
        arriveTime: "", // 到达时间
        isPick: 0, // 是否需要接站 0-不需要，1-需要
        pickPeople: "", // 接站人员安排
        inspectTime: "", // 来公司考察时间
        isFete: 0, // 是否需要宴请 0-否，1-是
        fatePeople: "", // 宴请人员
        fatePlace: "", // 宴请地点
        presentLeader: "", // 希望出席的领导
        inspectReason: null, // 来公司考察目的
        marketPrepareMaterial: [], // 需要市场部准备材料
        inspectionProcess: "", // 公司现场考察流程 这块可以选择1、公司固定接待流程、2、自己填流程
        showContent: "", // 电子屏显示内容
        receptionSpecifications: null, // 接待规格
        isPresent: 1, // 是否需要提供礼品
        dietaryArrangement: "", // 公司考察期间饮食安排
        isTravel: 0, // 是否需要旅游 0-不需要，1-需要
        travelAmount: 0, // 旅游费用 1-公司承担，2-客户承担
        isSendStation: 0, // 是否需要送站 0-不需要，1-需要
        sendStation: "", // 送达车站
        sendTime: "", // 送站时间
        sendPeople: "", // 送站人员
        createBy: "", // 创建人 *
        createTime: "", // 创建时间 *
        id: null, // id
        remark: "", // 备注
        updateBy: "", // 更新时间
        updateTime: "", // 更新人
      },
      // 旅游费用
      travelAmountList: [
        {
          value: 1,
          label: "公司承担"
        },
        {
          value: 2,
          label: "客户承担"
        }
      ],
      // 公司接待流程
      inspectionProcess: 1, // 0-公司固定接待流程、1-自己填流程
      // 表单的校验规则
      rules: {
        customerUnit: [
          {required: true, message: '请填写来客单位', trigger: 'blur'}
        ], // 来客单位
        customerName: [
          {required: true, message: '请填写来客姓名', trigger: 'change'}
        ], // 来客姓名
        customerVehicle: [
          {required: true, message: '请填写来客交通工具', trigger: 'blur'}
        ], // 来客交通工具
        arriveStation: [
          {required: true, message: '请填写到达车站', trigger: 'blur'}
        ], // 具体到站车站
        arriveTime: [
          {required: true, message: '请填写到达时间', trigger: 'change'}
        ], // 到达时间
        isPick: [
          {required: true, message: '请选择是否需要接站', trigger: 'change'}
        ], // 是否需要接站 0-不需要，1-需要
        pickPeople: [
          {required: true, message: '请填写接站人员安排', trigger: 'blur'}
        ], // 接站人员安排
        inspectTime: [
          {required: true, message: '请选择来公司考察时间', trigger: 'change'}
        ], // 来公司考察时间
        isFete: [
          {required: true, message: '请选择是否需要宴请', trigger: 'change'}
        ], // 是否需要宴请 0-否，1-是
        fatePeople: [
          {required: true, message: '请填写宴请人员', trigger: 'blur'}
        ], // 宴请人员
        fatePlace: [
          {required: true, message: '请填写宴请地点', trigger: 'blur'}
        ], // 宴请地点
        presentLeader: [
          {required: true, message: '请填写希望出席的领导', trigger: 'blur'}
        ], // 希望出席的领导
        inspectReason: [
          {required: true, message: '请选择来公司考察目的', trigger: 'change'}
        ], // 来公司考察目的
        marketPrepareMaterial: [
          {required: true, message: '请选择需要市场部准备材料', trigger: 'change'}
        ], // 需要市场部准备材料
        inspectionProcess: [
          {required: true, message: '请填写公司现场考察流程', trigger: 'change'}
        ], // 公司现场考察流程 这块可以选择1、公司固定接待流程、2、自己填流程
        showContent: [
          {required: true, message: '请填写电子屏显示内容', trigger: 'blur'}
        ], // 电子屏显示内容
        receptionSpecifications: [
          {required: true, message: '请选择接待规格', trigger: 'change'}
        ], // 接待规格
        isPresent: [
          {required: true, message: '请选择是否需要提供礼品', trigger: 'change'}
        ], // 是否需要提供礼品
        dietaryArrangement: [
          {required: true, message: '请填写公司考察期间饮食安排', trigger: 'blur'}
        ], // 公司考察期间饮食安排
        isTravel: [
          {required: true, message: '请选择是否需要旅游', trigger: 'change'}
        ], // 是否需要旅游 0-不需要，1-需要
        travelAmount: [
          {required: true, message: '请选择旅游费用', trigger: 'change'}
        ], // 旅游费用 1-公司承担，2-客户承担
        isSendStation: [
          {required: true, message: '请选择是否需要送站', trigger: 'change'}
        ], // 是否需要送站 0-不需要，1-需要
        sendStation: [
          {required: true, message: '请填写送达车站', trigger: 'blur'}
        ], // 送达车站
        sendTime: [
          {required: true, message: '请选择送站时间', trigger: 'change'}
        ], // 送站时间
        sendPeople: [
          {required: true, message: '请填写送站人员', trigger: 'blur'}
        ], // 送站人员
      },
      // 表格数据
      tableData: [],
      // 总数条数
      total: 0,
      // 查询参数
      queryParams: {
        customerUnit: "", // 来客单位
        customerName: "", // 来客姓名
        pageNum: 1,
        pageSize: 10,
      },
      // 用户信息
      user: {},
      roleGroup: {},
      postGroup: {},
    }
  },
  watch: {
    inspectionProcess: {
      immediate: true,
      handler(newV) {
        if (newV) {
          this.form.inspectionProcess = "公司固定接待流程"
        } else {
          if (this.form.inspectionProcess === "公司固定接待流程") {
            this.form.inspectionProcess = ""
          }
        }
      }
    },
  },
  computed: {
    ...mapGetters([
      'device'
    ]),
  },
  created() {
    this.provinceList = ProvinceData
    this.getList()
    this.getUserinfo()
  },
  activated() {
    this.getList()
  },
  methods: {
    // 来客姓名失焦的回调
    handleBlur({ target }) {
      if(target.value) { // 为真清除校验
        this.$refs['formRef'].clearValidate('customerName')
      } else { // 反之触发校验
        this.$refs['formRef'].validateField('customerName')
      }
    },
    // 添加来客信息
    addCustomerInfo(id) {
      this.customerInfoList.push({
        id: id + 1,
        customerName: "",
        customerDepartment: "",
        customerJob: "",
        customerPhone: ""
      })
    },
    // 删除来客信息
    removeCustomerInfo(index) {
      this.customerInfoList.splice(index, 1)
    },
    // 获取根据list中的value返回label
    getListValue(data, list, value = 'value') {
      let label = ''
      list.map((item) => {
        if (+item[value] === +data) {
          label = item.label
        }
      })
      return label
    },
    // 获取用户信息
    getUserinfo() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
      });
    },
    // 获取数据
    async getList() {
      this.loading = true
      const res = await getDataListApi(this.queryParams).catch(() => {
        this.loading = false
      })
      if (res.code === 200) {
        this.tableData = res.rows
        this.total = res.total
      }
      this.loading = false
    },
    // 搜索的回调
    searchHandler() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    // 删除的回调
    async deleteHandler(row) {
      const res = await deleteDataApi({
        id: row.id
      })
      if (res.code === 200) {
        this.$message({
          message: res.msg,
          type: 'success'
        });
        this.getList()
        this.dialogVisible = false
      } else {
        this.$message({
          message: res.msg,
          type: 'error'
        });
      }
    },
    // 打开弹窗
    openDialog(row) {
      if (row) {
        this.formId = row.id

        if (row.inspectionProcess !== '公司固定接待流程') {
          this.inspectionProcess = 0
        }

        // 反向处理来客信息
        if (!this.formatCustomerInfoOther(row)) {
          this.$message.error("未知错误请联系管理员！！！");
          return false
        }

        this.form = {
          ...row,
          customerName: "",
          marketPrepareMaterial: (row.marketPrepareMaterial ?? "").split(',').filter(i => i)
        }

        this.dialogTitle = 2
      } else {
        if (this.formId) {
          this.inspectionProcess = 1
          this.customerInfoList = [...this.$options.data().customerInfoList]
          this.form = {...this.$options.data().form}
        }
        this.formId = null
        this.dialogTitle = 1
      }
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['formRef'].clearValidate();
        // this.resetForm('formRef')
      })
    },
    // 导出的回调
    async exportHandler() {
      this.download('crm/customerVisit/export', {
        ...this.queryParams,
        userId: this.user.userId,
        deptId: this.user.deptId,
      }, `customerVisit_${new Date().getTime()}.xlsx`)
    },
    // 反向处理来客信息
    formatCustomerInfoOther(row) {
      try {
        let customerName = row.customerName.split(',') ?? [],
          customerDepartment = row.customerDepartment.split(',') ?? [],
          customerJob = row.customerJob.split(',') ?? [],
          customerPhone = row.customerPhone.split(',') ?? []

        const list = []

        for (let i = 0; i < customerName.length; i++) {
          const obj = {
            customerName: customerName[i],
            customerDepartment: customerDepartment[i],
            customerJob: customerJob[i],
            customerPhone: customerPhone[i],
            id: i + 1
          }
          list.push(obj)
        }
        this.customerInfoList = list

      } catch (e) {
        return false
      }

      return true
    },
    // 处理来客信息
    formatCustomerInfo() {
      try {
        const list = this.customerInfoList ?? []
        let customerName = [],
          customerDepartment = [],
          customerJob = [],
          customerPhone = []
        for (let i = 0; i < list.length; i++) {
          const ele = list[i]
          customerName.push(ele.customerName)
          customerDepartment.push(ele.customerDepartment)
          customerJob.push(ele.customerJob)
          customerPhone.push(ele.customerPhone)
        }

        this.form.customerName = customerName.join(',')
        this.form.customerDepartment = customerDepartment.join(',')
        this.form.customerJob = customerJob.join(',')
        this.form.customerPhone = customerPhone.join(',')
      } catch (e) {
        return false
      }

      return true
    },
    // 表单提交
    submitForm(formName) {
      // if(this.form.isImportant === 1 && !(this.form.basis)) {
      //   this.$notify({
      //     title: '警告',
      //     message: '请选择重点依据',
      //     type: 'warning'
      //   });
      //   return false
      // }
      if (!this.formatCustomerInfo()) {
        this.$message.error("未知错误请联系管理员！！！");
        return false
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.dialogTitle === 1) {
            this.addDataHandler()
          } else {
            this.updateDataHandler()
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 增加数据的回调
    async addDataHandler() {
      const payload = {
        ...this.form,
        marketPrepareMaterial: this.form.marketPrepareMaterial.join(',') ?? "",
        createBy: this.user.nickName,
        updateBy: this.user.nickName,
        userId: this.user.userId,
      }
      const res = await addDataApi(payload)
      if (res.code === 200) {
        this.$message({
          message: res.msg,
          type: 'success'
        });
        this.getList()
        this.dialogVisible = false
        this.formId = -1
      } else {
        this.$message({
          message: res.msg,
          type: 'error'
        });
      }
    },
    // 修改数据的回调
    async updateDataHandler() {
      const payload = {
        ...this.form,
        marketPrepareMaterial: this.form.marketPrepareMaterial.join(',') ?? "",
        updateBy: this.user.nickName,
      }
      const res = await updateDataApi(payload)
      if (res.code === 200) {
        this.$message({
          message: res.msg,
          type: 'success'
        });
        this.getList()
        this.dialogVisible = false
      } else {
        this.$message({
          message: res.msg,
          type: 'error'
        });
      }
    },
    // 重置表单
    resetForm(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].resetFields();
      }
    },
    // 重置的回调
    resetHandler() {
      this.resetForm('queryFormRef')
    },
  },
}
</script>

<style scoped lang="scss">
.app-container {
  .cus_table::v-deep .cell_table {
    padding: 0;

    .cell {
      padding: 0;
    }

    .item_tr {
      // padding: 5px;
      height: 50px;
      background: transparent;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #ebeef5;
    }

    .item_td {
      padding: 5px;
      height: 100%;
      width: 100%;
      display: flex;
      background: transparent;
      justify-content: center;
      align-items: center;

      .ellipsis {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }


    .item_tr:last-child {
      border-bottom: 0;

    }

  }
}
</style>
